|
1
|
|
|
class ctable { |
|
2
|
|
|
private can_edit = null; |
|
3
|
|
|
private instance: JQuery = null; |
|
4
|
|
|
constructor(config?: ctableOpt) { |
|
5
|
|
|
if (typeof config == "object") { |
|
6
|
|
|
if (config.hasOwnProperty("editable") && config.editable) { |
|
7
|
|
|
this.can_edit = true; |
|
8
|
|
|
} |
|
9
|
|
|
} |
|
10
|
|
|
} |
|
11
|
|
|
|
|
12
|
|
|
private editable_run = false; |
|
13
|
|
|
private editable(activate?: boolean) { |
|
14
|
|
|
const self = this; |
|
15
|
|
|
if (this.editable_run) { |
|
16
|
|
|
return; |
|
17
|
|
|
} |
|
18
|
|
|
if (activate && self.instance && self.instance.length) { |
|
19
|
|
|
this.editable_run = true; |
|
20
|
|
|
$(document).on("click", ".table-add", function (e) { |
|
21
|
|
|
e.preventDefault(); |
|
22
|
|
|
var $clone = self.instance |
|
23
|
|
|
.find("tr.addthis") |
|
24
|
|
|
.clone(true) |
|
25
|
|
|
.removeClass("d-none"); |
|
26
|
|
|
self.instance.find("table").append($clone); |
|
27
|
|
|
}); |
|
28
|
|
|
|
|
29
|
|
|
$(".table-remove").click(function () { |
|
30
|
|
|
$(this).parents("tr").detach(); |
|
31
|
|
|
}); |
|
32
|
|
|
|
|
33
|
|
|
$(".table-up").click(function () { |
|
34
|
|
|
var $row = $(this).parents("tr"); |
|
35
|
|
|
if ($row.index() === 1) return; // Don't go above the header |
|
36
|
|
|
$row.prev().before($row.get(0)); |
|
37
|
|
|
}); |
|
38
|
|
|
|
|
39
|
|
|
$(".table-down").click(function () { |
|
40
|
|
|
var $row = $(this).parents("tr"); |
|
41
|
|
|
$row.next().after($row.get(0)); |
|
42
|
|
|
}); |
|
43
|
|
|
} |
|
44
|
|
|
} |
|
45
|
|
|
|
|
46
|
|
|
create(id: string, where: string, data: string[]) { |
|
47
|
|
|
var table = `<table id='${id}' class='table table-responsive' style="position:relative"><thead><tr>`; |
|
48
|
|
|
var self = this; |
|
49
|
|
|
for (var i = 0; i < data.length; i++) { |
|
50
|
|
|
table = table + "<th>" + data[i] + "</th>"; |
|
51
|
|
|
} |
|
52
|
|
|
table = table + "</tr></thead><tbody></tbody></table>"; |
|
53
|
|
|
document.getElementById(where).innerHTML += table; |
|
54
|
|
|
if (this.can_edit) { |
|
55
|
|
|
setTimeout(function () { |
|
56
|
|
|
self.instance = $(`table#${id}`); |
|
57
|
|
|
self.instance.append( |
|
58
|
|
|
`<span class="table-add fas fa-plus text-success" style="position: absolute;right:15px;top:15px;cursor:pointer"></span>` |
|
59
|
|
|
); |
|
60
|
|
|
self.instance.find("tbody").append(`<tr class="addthis d-none"> |
|
61
|
|
|
<td contenteditable="true">Untitled</td> |
|
62
|
|
|
<td contenteditable="true">Undocumented</td> |
|
63
|
|
|
<td><span class="table-remove fas fa-trash text-danger" style="cursor:pointer"></span></td><td> <span class="table-up fas fa-arrow-up text-info" style="cursor:pointer"></span> <span class="table-down fas fa-arrow-down text-info" style="cursor:pointer"></span> </td> |
|
64
|
|
|
</tr>`); |
|
65
|
|
|
self.editable(true); |
|
66
|
|
|
}, 500); |
|
67
|
|
|
} |
|
68
|
|
|
} |
|
69
|
|
|
|
|
70
|
|
|
add(table: string, data: any[]) { |
|
71
|
|
|
var row = "<tr>"; |
|
72
|
|
|
for (var i = 0; i < data.length; i++) { |
|
73
|
|
|
var td = data[i]; |
|
74
|
|
|
if (typeof td == "object" || Array.isArray(td)) { |
|
75
|
|
|
td = `<pre class="json">${JSON.stringify(td, null, 2)}</pre>`; |
|
76
|
|
|
} |
|
77
|
|
|
if (!this.can_edit) { |
|
78
|
|
|
row += "<td>" + td + "</td>"; |
|
79
|
|
|
} else { |
|
80
|
|
|
row += '<td contenteditable="true">' + td + "</td>"; |
|
81
|
|
|
} |
|
82
|
|
|
} |
|
83
|
|
|
if (this.can_edit) { |
|
84
|
|
|
row += `<td><span class="table-remove fas fa-trash text-danger" style="cursor:pointer"></span></td><td> <span class="table-up fas fa-arrow-up text-info" style="cursor:pointer"></span> <span class="table-down fas fa-arrow-down text-info" style="cursor:pointer"></span> </td>`; |
|
85
|
|
|
} |
|
86
|
|
|
row += "</tr>"; |
|
87
|
|
|
document |
|
88
|
|
|
.getElementById(table) |
|
89
|
|
|
.getElementsByTagName("tbody")[0].innerHTML += row; |
|
90
|
|
|
} |
|
91
|
|
|
} |
|
92
|
|
|
|
|
93
|
|
|
interface ctableOpt { |
|
94
|
|
|
editable?: boolean; |
|
95
|
|
|
} |
|
96
|
|
|
|
dimaslanjaka /
universal-framework
